<template>
  <div class="fish-disease-table">
    <!-- <h2 class="table-title">识别鱼病记录</h2> -->
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>鱼名</th>
            <th>网箱编号</th>
            <th>时间</th>
            <th>鱼病</th>
            <th>置信度</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.fishName }}</td>
            <td>{{ item.netCageId }}</td>
            <td>{{ item.time }}</td>
            <td>{{ item.fishDisease }}</td>
            <td>{{ item.confidence }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { mockFishDiseaseApi } from '@/api';

export default {
  name: 'FishDiseaseTable',
  setup() {
    const tableData = ref([]);
    const fetchData = async () => {
      const res = await mockFishDiseaseApi.getDiseaseList();
      // 格式化时间和置信度
      tableData.value = (res.data || []).map(item => ({
        ...item,
        time: item.time ? new Date(item.time).toLocaleString() : '',
        confidence: item.confidence ? item.confidence + '%' : ''
      }));
    };
    onMounted(() => {
      fetchData();
    });
    return {
      tableData
    };
  }
};
</script>

<style scoped>
.fish-disease-table {
  width: 500px;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(0,0,0,0.1);
  color: #000000;
  border-radius: 8px;
  box-shadow: none;
  position: relative;
  left: 20px;
}

.table-title {
  color: #000000;
  text-align: center;
  margin-bottom: 16px;
  font-size: 22px;
}

.table-wrapper {
  height: 355px;
  overflow-y: auto;
  /* border: 1px solid #e0e0e0; */
  border-radius: 6px;
  /* 滚动条样式 */
  scrollbar-width: thin; /* Firefox: 窄滚动条 */
  scrollbar-color: rgba(88, 197, 255, 0.6) transparent; /* Firefox: 滚动条颜色 */
}

/* WebKit 浏览器（Chrome/Safari）滚动条样式 */
.table-wrapper::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent; /* 滚动条轨道透明 */
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1); /* 滚动条滑块半透明 */
  border-radius: 4px; /* 圆角 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  color: whitesmoke;
}

th {
  background-color: transparent;
  font-weight: 600;
}

tr:hover {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}
</style>
